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HTML basico 1 


Definicao 


HTML significa Hyper Text Markup Language e e a linguagem de marcagao de 
hipertexto, ou seja, e a linguagem na qual sao escritas as paginas da Web, 
interpretada pelo navegador. 

As informagoes estao ligadas na forma de paginas ligadas entre si. A pagina e 
transferida de urn computador remoto para o usuario, onde o browser faz o 
trabalho de interpretar os codigos naquele documento e mostra a pagina que o 
usuario ve. A Web esta estruturada em dois principios basicos: HTTP(Hiper Text 
Transfer Protocol) e HTML (Hiper Text Markup Language). 

HTTP e o protocolo de transference de hipertexto, ou seja, e o protocolo que 
permite a navegagao na Web, com o simples clicar do mouse sobre o texto (ou 
imagem) que esteja associado a outro link. 


Requisitos para o desenvolvimento de uma pagina WEB 

> Conhecer a linguagem HTML para escrever o codigo fonte de sua pagina; 

> Editor de texto para gerar o seu codigo fonte (bloco de notas, Front Page, 
Dremweaver, entre outros); 

> Urn navegador de internet (browser) para visualizar as suas paginas 
(Internet Explorer, Netscape, etc). 


TAGs 

Os comandos HTML sao chamados de TAGs, compreendem de marcas padroes 
que sao utilizadas para fazer indicagoes a urn browser. 

Assim como em outras linguagens, os comandos tern uma sintaxe propria, e 
seguem algumas regras: 

> As TAGs aparecem sempre entre sinais de “menor que” (<) e “maior que” 

(>); 

> Geralmente sao utilizadas aos pares, sendo que a TAG de finalizagao de 
urn comando qualquer e finalizada com a precedencia de uma barra (/). 
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Exemplos: 

TAG unico: 

<br> 

TAG duplo: 

<center> xxx </center> 


1.1 Iniciando um documento 

Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. 

Uma pagina HTML possui tres partes basicas: estrutura principal, um cabegalho e 
um corpo de pagina. 

Possui uma estrutura dividida em 4 TAGs basicas: 

<HTML> ... </HTML> 

<HEAD> ... </HEAD> 

<TITLE> ... </TITLE> 

<BODY> ... </BODY> 


<HTML> ... </HTML> 

Sao usados para delimitar os comandos HTML, indicam o inicio e o fim de um 
documento. 


<HEAD> ... </HEAD> 

Usado para indicar parametros de configuragao do documento, tambem utilizado 
para exibir o titulo na barra de titulos do browser. 


<TITLE> ... </TITLE> 

Indica o titulo do documento para o browser. Esta TAG deve estar sempre dentro 
das TAGs <HEAD> </HEAD>. 

<BODY> ... </BODY> 

Envolvem a segao de corpo do documento. Aqui fica o conteudo principal da 
Home Page. 
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Opcionalmente podemos indicar uma cor para o fundo da pagina, usando a opgao 
BGCOLOR, ou um arquivo de imagem para formar o fundo, usando a opgao 
BACKGROUND. 


Iniciaremos a nossa primeira pagina editando o codigo no Bloco de Notas. 

Siga os passos abaixo: 

1 . Crie uma pasta chamada OrgaoColegiado. 

2. Clique em Arquivo/Novo/Documento de Texto 

3. Nomeie o arquivo como index.html. 

4. Abra o arquivo, voce ira notar que a pagina esta em branco, pois ainda nao 
escrevemos nenhum codigo. 

5. Clique com o botao direito do mouse sobre o arquivo e clique em Editar, ele 
ira abrir o bloco de notas com seu conteudo vazio. 

6. Copie e cole o exemplo abaixo, salve o arquivo .txt e feche. 

7. Depois abra novamente o arquivo HTML. 


Exemplo com cor de fundo na pagina: 

<html> 

<head> 

<title> 

Curso de HTML 
</title> 

</head> 

<body bgcolor="green" > 

Corpo da pagina HTML com cor de fundo. 
</body> 

</html> 
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Agora substitua o codigo acima pelo exemplo abaixo seguindo os passos 5, 6 e 7. 

Exemplo com imagem de fundo na pagina: 

<html> 

<head> 

<title> 

Curso de HTML 
</title> 

</head> 

<body background="fundo.gif" > 

Corpo da pagina HTML com imagem de fundo. 

</body> 

</html> 
















1.2 Trabalhando com textos 

No corpo do documento e onde estara localizado o titulo e subtitulos, texto, 
imagens, ligagoes com outras paginas, etc. Nesta segao veremos como trabalhar 
com os textos. 


1.2.1 Titulos e Subtitulos 


Para demarcar titulos e subtitulos, use os TAGs de HEADER (HI a H6), 
juntamente com a opgao CENTER. 

Veja alguns exemplos: 

Texto inserido entre <H1> e </H1>: 

HI 

Texto inserido entre <H2> e </H2>: 

H2 

Texto inserido entre <H3> e </H3>: 

















9 


m 

Texto inserido entre <H3><CENTER> e </CENTER></H3> : 

m 

Observagoes: A TAG CENTER tem a fungao de deixar o cabegalho ou texto 
centralizado. 

Exemplo: 

Crie um novo arquivo chamado ExemploTitulo.html e insira o codigo abaixo. 

<html> 

<head> 

<title> 

Curso de HTML 
</title> 

</head> 

<body> 

<Hl>Tltulo com HI: Orgaos Colegiados</Hl> 

<H2>Tltulo com H2: Orgaos Colegiados</H2> 

<H3>Tltulo com H3: Orgaos Colegiados</H3> 

<H4>Titulo com H4: Orgaos Colegiados</H4> 

<H5>Titulo com H5: Orgaos Colegiados</H5> 

<H6><CENTER>Titulo com H6 centralizado: Orgaos 
Colegiados</CENTERX/H6> 

</body> 

</html> 
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1.2.2 Estilos de texto 

Alem da TAG <CENTER>...</CENTER> existem as seguintes TAGs 
que podem ser utilizadas para a formatagao de um texto. 

<B>...</B> 

Aplica o estilo negrito. 

<l>...</l> 

Aplica o estilo italico. 

<U>...</U> 

Aplica o estilo sublinhado (nem todos os browser o reconhecem). 

<SUP>...</SUP> 

Faz com que o texto fique sobrescnto . 

<SUB>...</SUB> 

Faz com que o texto fique subscrito- 


<PRE>...</PRE> 

Utiliza a pre-formatagao, ou seja, deixa o texto da maneira em que foi 
digitado. 
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<p> 

A TAG responsavel pela quebra de paragrafos e a <P> que finaliza o 
paragrafo e insere automaticamente uma linha em branco entre paragrafos. 

Sintaxe do comando: 

<P align="posigao"> Texto do paragrafo. 

Posigao pode ser: 

> Left: alinhamento a esquerda. 

> Center: central izado 

> Right: alinhamento a direita 


Exemplo: 

Crie um novo arquivo com o nome EstiloTexto e insira o codigo abaixo: 

<html> 

<body> 

<title>Curso de HTML</title> 

<B>Estilo negrito.</B> 

<br> 

<I>Estilo italico.</I> 

<br> 

<U>estilo sublinhado (nem todos os browser o 
reconhecem)</U> 

<br> 

<SUP>Texto sobrescrito.</SUP> 

<br> 

<SUB>Texto subscrito.</SUB> 

<br> 

<PRE>Este e um pequeno texto 
com estilo 

pre-formatado.</PRE> 


<p align="center"> Este e um exemplo do primeiro 
paragrafo centralizado. 

<p> Este e um exemplo do segundo paragrafo. 
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</body> 

</html> 



1.2.3 Fontes 

Para inserir em sua pagina um texto com fontes de tamanhos, cores e tipos 
diferentes utilizamos a TAG <FONT> ... </FONT>. 

Sintaxe do comando: 

<FONT size="n" face="nome" color="cor"> 

TEXTO 

</FONT> 


Onde: 

> SIZE=“n”: n varia de 1 a 7 e 3 e o valor padrao da maioria dos 
navegadores; 

> FACE-’nome” : nome da fonte a ser utilizada (Arial, Tahoma, etc); 

> COLOR=”cor” : cor da fonte definida em hexadecimal, ou atraves de 
um nome pre-definido de cores. Veja no capitulo 9 desta apostila. 

Exemplo: 

Crie um arquivo chamado Fontes.html e insira o codigo abaixo: 


<html> 
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<body> 

<title>Curso de HTML</title> 

<FONT size="l" face="Tahoma" color="red"> 
Texto com cor vermelha 
</FONT> 

<br><br> 

<FONT size="2" face="Arial" color="green"> 
Texto com cor verde 
</FONT> 

<br><br> 


<FONT size="3" face="Tahoma" color="blue"> 
Texto com cor azul 
</FONT> 

<brxbr> 


<FONT size="4" face="Tahoma" color="orange"> 
Texto com cor laranja 
</FONT> 

<brXbr> 

<FONT size="5" face="Tahoma" color="pink"> 
Texto com cor pink 
</FONT> 

<brXbr> 


<FONT size="6" face="Tahoma" color="#4F2F4F"> 
Texto com cor violeta 
</FONT> 

<brXbr> 

<FONT size="7" face="Tahoma" color="#FF00FF"> 
Texto com cor magenta 
</FONT> 

<brxbr> 

</body> 

</html> 
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1.3 Quebras de linha 

A tag <BR> faz a quebra de linha sem acrescentar espagos extras entre linhas. 
Finaliza a linha de texto e insere automaticamente uma outra linha em branco. 
Nao precisa ser finaliza com </BR>. 


1.4 Linhas Horizontais 

Desenha uma linha horizontal no documento. 
Nao precisa ser finalizada com </HR>. 

Sintaxe: 


<HR width="n%" align="posigao" size="n" color="#cor" 
noshade> 

Atributos: 

> SIZE: Define a espessura, em pixels, da linha. 

> WIDTH: Define a largura da linha, o que pode ser feito em pixels 
(numero absoluto) ou em percentual da tela (com o simbolo de %) 

> ALIGN: Alinhamento, como o que tern sido usado, pode ser LEFT, 
RIGHT e CENTER, ou seja, esquerda, direita e ao centra, 
respectivamente. 
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> NOSHADE: Linha sem sombra. O padrao e a linha sombreada, 
utilizando esse atributo temos uma linha sem sombra. 


Exemplo: 

Crie urn arquivo chamado LinhaHorizontal.html e insira o codigo abaixo: 

<html> 

<body> 

Primeiro exemplo com a linha horizontal 

<HR width="100%" align="left" size="2" color="silver" > 

<br> 

<center>Segundo exemplo com a linha horizontal</center> 

<HR width="70%" align="center" size="3" color="blue" > 

<br> 

Terceiro exemplo com a linha horizontal 

<HR width="30%" align="center" size="5" color="red" noshade> 
<br> 

</body> 

</html> 



















2. Caracteres Especiais 
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&Aacute; 
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6 
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&Oslash; 

0 

&oslash; 

6 

&Otilde; 

6 

&otilde; 

o 

&Ouml; 

6 

&ouml; 

U 

&Uacute; 

u 

&uacute; 

U 

&Ucirc; 

u 

&ucirc; 

U 

&Ugrave; 

LI 

&u grave; 

U 

&Uuml; 

u 

&uuml; 

9 

&Ccedil; 

9 

&ccedil; 

N 

&Ntilde; 

h 

&ntilde; 

< 

&lt; 

> 

&gt; 

& 

&amp; 

ii 

&quot; 

® 

&reg; 

© 

&copy; 

Y 

&Yacute; 

y 

&yacute; 


&THORN; 


&thorn; 

& 

&szlig; 

0 

&#186; 

a 

&170; 

i 

&#185; 

2 

&#178; 

3 

&#179; 

/ 

&#131; 

t 

&#134; 

t 

&#135; 

0/ 

/oo 

&#137; 

0 

&#162; 

£ 

&#163; 

« 

&#171; 

+ 

&#177; 

» 

&#187; 

■ 

&#183; 

% 

&#188; 

y 2 

&#189; 

3 / 4 

&#190; 

6 

&#191; 

X 

&#215; 

T 

&#247; 

i 

&#161; 

a 

&#164; 
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3. Imagens 

Para inserir uma imagem em uma pagina web utilizamos o comando, tag, 

<img src> e seus atributos. Os formatos mais usados sao o GIF e o JPG, ambos 
com compactagao de pixels. 

Sintaxe: 

<IMG SRC="endere?o da imagem" WIDTH="n%" HEIGHT="n%" 

ALIGN="posigao" ALT="texto"> 

Atributos: 

> WIDTH: Define a largura da imagem, o que pode ser feito em pixels 
(numero absoluto) ou em percentual da tela (com o simbolo de %). 

> HEIGHT: Define a altura da linha, o que pode ser feito em pixels 
(numero absoluto) ou em percentual da tela (com o simbolo de %). 

> ALIGN: Alinhamento da imagem pode ser, LEFT, RIGHT e CENTER, 
ou seja, esquerda, direita e ao centra, respectivamente. 

> ALT: texto que ira aparecer ao passar o mouse sobre a imagem ou 
texto que surgira caso a imagem nao possa ser visualizada. 

> BORDER: Especificagao da largura da borda da imagem. Valor em 
pixel. 

> VSPACE: Para especificar o espago que deve ser deixado acima e 
abaixo da imagem. Valor em pixel. 

> HSPACE: Especifica o espago que deve ser deixado nas laterais da 
imagem. Valor em pixel. 

O unico obrigatorio e o src. 


Ex.: 


Crie urn arquivo chamado lmagem.html e insira o codigo abaixo: 

<html> 

<body> 

<title>Curso de HTML</title> 


<IMG SRC="img/bullet.gif" ALIGN="left" ALT="Imagem Bullet"> 
<font size="3" face="arial" color="blue">Esta e a nossa 
primeira imagem inserida.</font> 

<br><br> 
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<font size="4" face="Courier New" color="orange">Abaixo segue 
mais imagens na pagina.</font> 

<br><br> 

<IMG SRC="img/calendario.gif" ALIGN="left" ALT="Calendario"> 
<font size="3" face="arial" color="black">Calendario.</font> 
<br><br> 

<IMG SRC="img/search.gif" ALIGN="left" ALT="Buscar"> 

<font size="3" face="arial" color="black">Buscar.</font> 
<brXbr> 

<IMG SRC="img/salvar.gif" ALIGN="left" ALT="Salvar"> 

<font size="3" face="arial" color="black">Salvar.</font> 
<br><br> 

</body> 

</html> 
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4. LINKS 


O principal poder do HTML vem da capacidade de interligar partes de um texto, 
imagens a outros documentos. 

A interligagao entre documentos nao se restringe somente as ligagoes com outras 
paginas. Em paginas muito longas onde um assunto tern varios topicos, podemos 
utilizar indices onde os links tern a fungao de interligar os topicos de um texto e 
que com apenas um clique em um dos topicos do indice, o item e exibido. 


4.1 Links para o mesmo diretorio 

Voce so precisa especificar o nome do arquivo que sera chamado e a sua 
extensao. 

Sintaxe: 

<A HREF = "nomeDoArquivo.extensao"> 

Texto ou imagem 

</A> 

Onde: 

> A: abertura da TAG de link; 

> HREF=”nomeDoArquivo.extensao”: deve ser informado o nome 
completo do arquivo que sera acessado; 

> Texto ou imagem: que servira como link; 

> /A: encerra a TAG de link. 

Exemplo: 

Edite o primeiro arquivo que criamos index.html. 

Substitua o codigo pelo o que esta abaixo: 

<html> 

<head> 

<title> 

Curso de HTML 
</title> 

</head> 

<body > 

<hl><font face="arial" color="orange">MENU</fontx/hl> 
<HR width="100%" align="left" size="2" color="silver" > 
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<A HREF = "EstiloTexto.html">Estilo de Texto</A> 

<br> 

<A HREF = "ExemploTitulo.html">Titulos e Subtitulos</A> 
<br> 

<A HREF = "LinhaHorizontal.html">LinhaHorizontal</A> 
<br> 

<A HREF = "Fontes.html">Fontes</A> 

<br> 

<A HREF = "Imagem.html">Imagem</A> 

</body> 

</html> 



4.2 Links para outro diretorio 

Para criar links para uma pagina localizada em outros diretorios e necessario 
indicar o caminho completo do arquivo. Para a WEB isto tern uma forma urn pouco 
diferente do Windows e do DOS, veja: 

• A barra utilizada para separar os diretorios e a barra convencional (/); 

• O ponto de partida para localizar urn arquivo em outro diretorio e o 
atual; 

• Para baixar urn nivel deve utilizar os sinais 


Exemplo: 
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<A HREF="../matricula/CadastraAluno.html" > 
Cadastro de Aluno 
</A> 


4.3 Parametro NAME 

0 parametro NAME serve para marcar um ponto para possiveis desvios. Quando 
desviamos para um determinado ponto dentro de um documento, indicamos este 
nome com um Por exemplo: 

<A NAME="AQUI">Aqui e um ponto para desvios</A>... 

<A HREF="#AQUI">Desvia para o ponto "AQUI"</A> 
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5. Listas 


5.1 - Criando listas ordenadas 

Listas ordenadas sao tambem denominadas listas numeradas, pois, quando um 
navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar 
cada item utilizando numeros, como 1, 2, 3, e assim sucessivamente. 

Listas ordenadas sao iniciadas pela TAG <OL>. 

Cada item utiliza a TAG <LI>. 

Finalmente, </OL>. 

Sintaxe: 

<OL TYPE="formato" START="n"> 

<LI> Topico 1 
<LI> Topico 2 
<LI> Topico n 
</OL> 

Onde: 

> <OL>: inicio da lista numerada; 

> TYPE=”formato”: o formato da numeragao pode ser: 

❖ 1: lista numerica (nao e necessario ser definido); 

❖ A: lista alfabetica com letras maiusculas; 

❖ A: lista alfabetica com letras minusculas; 

❖ I: Lista numerica com numeros romanos maiusculos; 

❖ I: lista numerica com numeros romanos minusculos; 

> START=”n”: o valor inicial de uma lista numerada; 

> <LI>: topicos da lista; 

> </OL>: fim da lista numerada; 

Exemplo: 

Crie um arquivo chamado Listas.html e insira o codigo abaixo: 

<html> 

<title>Curso de HTML</title> 

<body> 

<center><hl>Listas Ordenadas</hl></center> 


<h3>Cursos</h3> 
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<0L> 

<LI>Graduagao 

<LI>Pos-Graduagao Lato Sensu 
<LI>Cursos de Pos-Graduagao Stricto 
</0L> 


Sensu 


</body> 

</html> 



5.2 - Criando listas nao ordenadas 

Listas nao ordenadas sao muito parecidas com as ordenadas. A unica diferenga e 
o fato de elas nao definirem explicitamente uma ordem, como e no caso as 
numeradas. Eles sao formados por simbolos, que podem ser bola, quadrado, e 
uma bola vazia. Elas sao iniciadas com a TAG <UL> e sao respectivamente 
terminadas com </UL>. E seus elementos sao que nem as numeradas: com <LI>. 


Sintaxe: 

<UL TYPE="formato"> 
<LI> Topico 1 
<LI> Topico 2 
<LI> Topico 3 


</UL> 
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Onde: 

> <UL> : Imcio da lista pontuada; 

> TYPE=”formato”: o formato do marcador pode ser: 

❖ disc: o marcador e um ponto (padrao utilizado pelos 
navegadores, nao precisa indicar); 

❖ square: o marcador e um quadrado; 

❖ circle: o marcador e um ponto. 

> <LI>: topicos da lista, nao e necessario encerrar a TAG; 

> </UL>: fim da lista pontuada 

Exemplo: 

Acrescente o codigo abaixo no arquivo Listas.html: 

<br> 

<center><hl>Listas Nao Ordenadas</hlX/center> 
<h3>Membro da Comunidade Academica</h3> 

<UL TYPE = "disc"> 

<LI>Aluno 

<LI>Docente 

<LI>Tecnico Administrative 
</UL> 
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6. Tabelas 

Tabelas correspondem a um otimo formato para originar informagoes, e e por essa 
razao que eles foram acrescentados a linguagem HTML. 


6.1 - Construindo tabelas com o elemento TABLE 

A TAG <TABLE> e utilizada para a representagao de dados tabulares. A estrutura 
e o conteudo da tabela devem ficar dentro das TAGs <TABLE> </TABLE> 


6.1.1 - O titulo da tabela (elemento CAPTION) 

A TAG <CAPTION> especifica o titulo de uma tabela. Por exemplo: 

<CAPTION>Notas da primeira avaliagao</CAPTION> 


6.1.2 - TABLE HEADINGS (elemento TH) 

A TAG <TH> e usada para especificar as celulas de cabegalho da tabela. Essas 
celulas sao diferentes das outras, pois seu conteudo aparece geralmente em 
negrito. O elemento TH pode ser apresentado sem conteudo algum: isso 
corresponde a uma celula em branco. As tabelas podem ainda conter mais de um 
TH para uma dada coluna, ou linha, ou simplesmente nao conter nenhum 
elemento TH, isto e, nao conter em nenhuma celula em destaque. O TAG dela e: 

<TH>texto em destaque</TH> 

Observagoes: Elas devem ficar, assim como todas, dentro da TAG <TABLE>. 


6.1.3 - TABLE DATA (elemento TD) 

A TAG <TD> especifica a celulas de dados de uma tabela. Por se tratar de dados 
comuns (e nao cabegalhos), essas celulas possuem seu conteudo escrito em 
fonte normal, sem nenhum destaque e alinhamento a esquerda. Assim como o 
TH, pode-se construir celulas em branco, usando o elemento TD, como no 
exemplo a seguir: 

<TD>Celulas de dados</TD> 

Observagoes: A TAG de terminagao, <TD>, tambem e opcional. 
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6.1.4 - END OF TABLE ROW (elemento TR) 

A TAG <TR> indica o inicio de uma linha na tabela. Cada linha da tabela pode 
conter varias celulas, e, portanto, e necessario que se faga uso de uma marcagao 
que indique exatamente o ponto de quebra de uma linha e inicio de outra. Toda 
linha deve terminar com urn </TR>. 


6.2 - Atributos para a tabela 

As marcagoes das tabelas podem apresentar resultados diferentes, se 
acompanhadas de alguns atributos. Os principais sao: 


6.2.1 - BORDER 

Urn atributo opcional para ser usado com TABLE e o atributo BORDER. Se ele 
estiver presente, a tabela sera formatada com linhas de borda. 

Atengao: Todas as explicagoes acima como as que estao por vir, foram feitas, 
para que voce possa saber o que significa a TAG em questao. 


Exemplo: 

CTABLE BORDER> 

<CAPTION> Nota da primeira avaliagao </CAPTION> 
<TD>Notas/Alunos</TD> 

<TH>Eduardo</TH> 

<TH>Ana Lucia</TH> 

<TH>Andrea</TH> 

<TR> 

<TH>Notas</TH> 

<TD>8,0</TD> 

<TD>9.3<TD> 

<TD>7.8</TD> 

<TR> 

<TH>No de Inscrigao</TH> 

<TD>37 6234809</TD> 

<TD>38734 904 8</TD> 

<TD>502350432</TD> 

</TABLE> 


Veja o resultado: 
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Notas/Alunos 

Eduardo 

Ana Lucia 

Andrea 

Notas 

8,0 

9.3 

fc?_ 1 

No de inscri?ao 376234809 

387349048 

502350432 


O atributo BORDER pode tambem receber um valor que vai estabelecer qual a 
espessura (alem da existencia) da linha de borda da tabela (BORDER-'valor"). Se 
o valor atribuido for 0 (zero), o BORDER funciona exatamente como o caso 
padrao, sem o BORDER. Dessa maneira, e possivel colocar tabelas em maior 
destaque, atribuindo um valor maior que 1 para o BORDER. 

CTABLE B0RDER=5> 

<TR> 

<TD>TESTE</TD> 

<TD>TESTE2</TD> 

<TD>TESTE3</TD> 

</TR> 

<TR> 

<TD>TESTE4</TD> 

<TD>TESTE5</TD> 

<TD>TESTE6</TD> 

</TR> 

</TABLE> 

Veja o resultado: 


TESTE1 

TESTE2 

: TESTE3 


TESTE4 

[tESTE5 

TESTE6 
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6.2.2 - ALIGN 

Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto 
dentro de uma celula, com relagao as bordas laterais. Quando aplicado a TR, ele 
define o alinhamento de toda uma linha da tabela. 

O exemplo abaixo mostra como o ALIGN aceita os valores LEFT, CENTER ou 
RIGHT, para alinhar a esquerda, centralizar ou alinhar a direita, respectivamente. 

CTABLE BORDER> 

<TD>Primeira celula</TD> 

<TD>Segunda celula</TD> 

<TD>Terceira celula</TD> 


<TR> 
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<TD ALIGN="CENTER">Centro</TD> 
<TD ALIGN="LEFT">Esquerda</TD> 
<TD ALIGN="RIGHT">Direita</TD> 

<TR> 

</TABLE> 

Veja o resultado: 


Primeira celula 

Segunda celula 

Terceira celula 

o 

CD 

o 

|Esquerda 

Direita 


6.2.3 - VALIGN 

Pode ser aplicado a TH e TD e define o alinhamento do texto em relagao as 
bordas superior e inferior. 

Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no 
meio e na parte de baixo, respectivamente. 

Veja o exemplo: 

CTABLE BORDER> 

<TD>Teste de alinhamento</TD> 

<TD VALIGN="TOP">TOP</TD> 

<TD VALIGN="middle">MIDDLE</TD> 

<TD VALIGN="bottom">BOTTOM</TD> 

</TABLE> 

Veja o resultado: 


Teste para almhamento 

TOP 

MIDDLE 

BOTTOM 


6.2.4-CELLSPACING 

Este atributo compreende a distancia entre celulas e linhas. 
Deve ser adicionado dentro da TAG <TABLE>. 

Como padrao dos navegadores a distancia e 2 pixels. 


Exemplo: 
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Crie um arquivo chamado Tabela.html e insira o codigo abaixo: 

<h3>Exemplo com CELLSPACING</h3> 

<TABLE BORDER="1" WIDTH="80%" ALIGN="center" CELLSPACING="6"> 
<TR> 

<TD WIDTH="33%" ALIGN="center"> Coluna 1 </TD> 

<TD WIDTH="33%" ALIGN="center"> Coluna 2 </TD> 

<TD WIDTH="34%" ALIGN="center"> Coluna 2 </TD> 

</TR> 

</TABLE> 


6.2.5-CELLPADDING 

Este atributo e utilizado para formatar o espago entre o conteudo de uma celula e 
suas bordas em todos os sentidos. 

E aplicado dentro da TAG <TABLE>. 

Exemplo: 

Acrescente o codigo abaixo no arquivo Table.html: 

CTABLE BORDER="1" WIDTH="80%" ALIGN="center" CELLPADDING="6"> 
<TR> 

<TD WIDTH="33%"ALIGN="center"> Aluno </TD> 

<TD WIDTH="33%"ALIGN="center"> Docente </TD> 

<TD WIDTH="34%"ALIGN="center"> Tecnico Administrative 

</TD> 

</TR> 

</TABLE> 

6.2.6 - ROWSPAN 

Define quantas linhas uma mesma celula pode abranger. Por padrao, na maioria 
dos navegadores de Internet cada celula adicionada em uma tabela corresponde a 
uma linha. Pode ser aplicado em TH ou TD, proporcionando o mesmo efeito. 

Exemplo: 

Acrescente o codigo abaixo no arquivo Table.html. 

CTABLE BORDER="1" WIDTH="380" CELLPADDING="7" ALIGN="center"> 
<TR> 

<TD WIDTH="16%" ROWSPAN= " 3 "> 3 linhas </TD> 

<TD WIDTH="16%"> coluna 2 </TD> 

<TD WIDTH="16%"> coluna 3 </TD> 

<TD WIDTH="17%"> coluna 4 </TD> 
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<TD WIDTH="17%"> coluna 5 </TD> 
</TR> 

<TR> 

<TD WIDTH="16%"> coluna 2 </TD> 
<TD WIDTH="16%"> coluna 3 </TD> 
<TD WIDTH="17%"> coluna 4 </TD> 
<TD WIDTH="17%"> coluna 5 </TD> 
</TR> 

<TR> 

<TD WIDTH="16%"> coluna 2 </TD> 
<TD WIDTH="16%"> coluna 3 </TD> 
<TD WIDTH="17%"> coluna 4 </TD> 
<TD WIDTH="17%"> coluna 5 </TD> 
</TR> 

</TABLE> 


6.2.7-COLSPAN 

Este atributo define quantas colunas uma celula pode abranger. Por padrao, na 
maioria dos navegadores de Internet cada celula adicionada em uma tabela 
corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a 
mesma abrangencia. 

<h3>Exemplo com COLSPAN</h3> 

<TABLE BORDER="1" WIDTH="80%" ALIGN="center"> 

<TR> 

<TD WIDTH="24%" COLSPAN="3">Celula com 3 colunas </TD> 

<TD WIDTH="20%">coluna 4</TD> 

<TD WIDTH="20%">coluna 5</TD> 

</TR> 

<TR> 

<TD WIDTH="20%">coluna 1</TD> 

<TD WIDTH="20%">coluna 2</TD> 

<TD WIDTH="20%">coluna 3</TD> 

<TD WIDTH="20%">coluna 4</TD> 

<TD WIDTH="20%">coluna 5</TD> 

</TR> 

</TABLE> 
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6.2.8 - Largura da celula 

Para alterar a largura de uma celula da tabela basta acrescentar o parametro WIDTH dentro da tag 
<TD>. Exemplol: 

CTABLE B0RDER=2> 

<TR> 

<TD WIDTH=100> WIDTH=100</TD> 

<TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD> 

</TR> 

</TABLE> 


6.2.9 - Cor de fundo das celulas 


Outro atributo que podemos ter nas tabelas e mudar a sua cor de fundo, isto se torna 
particularmente util quando se quer dar destaque a uma celula em especial. 
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Vejamos um exemplo: 

<TABLE BORDER=0> 

<TR> 

<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD> 
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD> 

<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> 
</TR> 

<TR> 

<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD> 

<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> 
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> 
</TR> 


</TABLE> 
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7. Formularios 


A linguagem HTML tambem permite que o cliente (navegador) interaja com o 
servidor, preenchendo campos, clicando em botoes e passando informagoes. 

O elemento FORM, da linguagem HTML, e justamente o responsavel por tal 
interagao. Ele prove uma maneira agradavel e familiar para coletar dados do 
usuario atraves da criagao de formularios com janelas de entrada de textos, 
botoes, etc. 


7.1 - Construindo formularios com o FORM 

Para fazer formulario, voce tern que colocar as TAGs <FORM> </FORM>. Todos 
os outros comandos, devem ficar dentro dessas TAGs. Ok?! 


7.2 - Atributos para FORM 

O elemento FORM pode conter dois atributos que determinaram para onde sera 
mandada a entrada do FORM. Vejam como eles sao: 


7.2.1 - GET 


Os dados entrados fazem parte do URL associado a consulta enviado para o 
servidor e suporta ate 128 caracteres. 

7.2.2 - POST 

E o mais utilizado, pois envia cada informagao de forma separada da URL. Com 
este metodo POST os dados entrados fazem parte do corpo da mensagem 
enviada para o servidor e transfere grande quantidade de dados. 


7.2.3-INPUT 


A TAG <INPUT> especifica uma variedade de campos editaveis dentro de urn 
formulario. Ele pode receber diversos atributos que definem o tipo de mecanismo 
de entrada (botoes, janelas de texto, etc.), o nome da variavel associada com o 
dado da entrada, o alinhamento e o campo do valor mostrado. O atributo mais 
importante do INPUT e o NAME. Ele associa o valor da entrada do elemento. Por 
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exemplo, quando voce for receber os dados, ja, processados, ira vir o name: = 
resposta dada pelo visitante. Outro atributo importante e o TYPE. Ele determina o 
campo de entradas de dados. Veja como se usa este atributo: 

CINPUT TYPE="TEXT" NAME="nome"> 

Para mudar o tamanho, da janela padrao, voce tem que colocar o comando SIZE. 
Por exemplo: 

CINPUT TYPE "TEXT" NAME="nome" SIZE=8>(ou numero desejado) 

Outro comando importante e o VALUE. Ele acrescenta uma palavra digitada no 
comando a janela. Por exemplo: 

CINPUT TYPE "TEXT" NAME="nome" SIZE=8 VALUE="texto."> 


Olhe como ficaria: 


texto. 


7.2.3.1 - Tipos de elementos TYPE 


Voce pode fazer varias coisas com o elemento TYPE. Por exemplo, para ser urn 
campo de senha, que quando digitado, aparega o simbolo "*", ao inves das letras, 
voce deve escrever o seguinte: 

CINPUT TYPE"PASSWORD" NAME="nome" SIZE=8> 


7.2.3.1.1- TYPE= "RADIO " 


Quando o usuario deve escolher uma resposta em uma unica alternativa, 
de urn conjunto, utiliza-se o RADIO Buttons. Urn exemplo tipico do uso de 
tais botoes e cuja resposta pode ser SIM ou NAO. E preciso que todos os 
radios buttons de urn mesmo grupo, ou seja, referentes a mesma pergunta, 
tenham o mesmo atributo NAME. Para esse tipo de entrada, os atributos 
NAME e VALUE, sao necessarios. Veja a seguir: 
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<INPUT TYPE="RADIO" NAME="voce gostou dessa home page?" 
VALUE="sim">sim<p> 

CINPUT TYPE="RADIO" NAME="voce gostou dessa home page?" 
VALUE="nao">nao<p> 


Repare: 

C sim 
C nao 


7.2.3.1.2 - TYPE=”PASSWORD" 

Este comando serve para fazer um campo de senhas! Quando a pessoa 
digitar, aparecera o sinal de "*"! O comando e: 

CINPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6> 


7.2.3.1.3 - TYPE="CHECKBOX" 

Esse comando e valido quando apenas uma resposta, e esperada. Mas 
nem sempre esta e a situagao...O tipo CHECKBOX prove outros botoes 
atraves dos quais mais de uma alternativa, pode ser escolhida. 

Definigao dos checkboxs: 

CINPUT TYPE="CHECKBOX" NAME="netscape" VALUE="net"> 
Netscape<p> 

CINPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp"> 
Internet ExplorerCp> 

CINPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos"> 
MosaicCP> 

CINPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot 
JavaCP> 


Veja o resultado: 
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f~ Netscape 


I - Internet Explorer 
I - Mosaic 
Hot Java 


7.2.3.1.4 - TYPE="SUBMIT" 


Esse e o botao que submete os dados do formulario quando pressionados, 
ou seja, possibilitam, o envio, dos dados para o script que vai trata-los. Veja 
como se adiciona o botao: 


CINPUT TYPE="SUBMIT" VALUE="enviar"> 

Veja como ficara: 

enviar I 


7.2.3.1.5 - TYPE= "RESET" 


No caso dos botoes RESET, quando o botao e clicado, ele 
automaticamente limpa todos os campos ja preenchidos no formulario, 
voltando a situagao inicial. 

CINPUT TYPE="RESET" VALUE="Limpar"> 


Veja como ficara: 


Limpar 


7.2.4 - TEXTAREA 


Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos 
COLS e ROWS que especificam, respectivamente, o numero de colunas e linhas 
que se deseja mostrar para o usuario. O atributo NAME e obrigatorio, e especifica 
o nome da variavel, que sera associada a entrada do cliente (navegador). O 
atributo VALUE nao e aceito nesse elemento, mas voce pode colocar ja urn texto 
da seguinte maneira. Veja como ele e colocado: 
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CTEXTAREA NAME="nome" COLS=20 R0WS=3>texto</TEXTAREA> 



7.2.5-SELECT 

Permite definir uma lista de opgoes, com barra de rolagem ou fixa na tela do 
navegador. 

E uma TAG que deve ser iniciada com <SELECT> e finalizada com </SELECT>. 
Sintaxe: 

<SELECT MULTIPLE NAME="nomeDaLista"> 

<OPTION SELECTED VALUE="valor de retorno"> 

Valor Visualizado 
<OPTION VALUE="Valor de retorno"> 

Valor Visualizado 2 
</SELECT> 

Onde: 

> NAME: obrigatorio, serve para a identificagao da lista; 

> OPTION: item da lista; 

> MULTIPLE: com este atributo a lista aparecera sempre aberta; 

> SELECTED: indica o valor padrao da lista; 

> VALUE: valor a ser retornado ao servidor. 

Exemplo: 


<SELECT MULTIPLE NAME="Estados"> 

<OPTION SELECTED VALUE="SP"> Sao Paulo 
<OPTION VALUE="RJ"> Rio de Janeiro 
COPTION VALUE="MG"> Minas Gerais 
<OPTION VALUE="ES"> Espirito Santo 
</SELECT> 


7.2.6 - Exemplo completo de formulario 
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Mostraremos a seguir um exemplo completo de um formulario para Cadastro de 
Conselhos. Utilizaremos tambem a tag TABLE para alinhar os campos do 
formulario na tela em questao. Crie um arquivo com nome de CadConselho.html e 
copie o exemplo abaixo: 


<html> 

<body> 

<title>Orgao Colegiado</title> 

<TABLE B0RDER=1 BGCOLOR="blue" width="100%"> 

<TH Xfont color="white">Cadastro de Conselho</fontx/TH> 
</TABLE> 


<FORM NAME="form_conselho" METHOD="POST"> 

<h4>Programa</h4> 

<table width="100%"> 

<tr> 

<td width=" 15%"><font size="3" face="arial"> Unidade</fontX/td> 
<tdxinput type="text" name="codUnidade" size="5"x/td> 

<tdxinput type="text" name="unidade" size="80"x/td> 

</tr> 

<tr> 

<td width="15%"><font size="3" face="arial"> Programa</fontX/td> 
<tdxinput type="text" name="codPrograma" size="5"X/td> 
<tdxinput type="text" name="programa" size="80"></td> 

</tr> 

</table> 

<h4>Conselho de Programa de Pos-Graduagao</h4> 

<table width="100%"> 

<tr> 

<td width="15%"><font size="3" face="arial">Codigo</fontX/td> 
<tdxinput type="text" name="codigo" size="5"X/td> 

</tr> 

<tr> 

<td width=" 15%"><font size="3" face="arial">Nome</fontX/td> 
<tdxinput type="text" name="nome" size="100"X/td> 

</tr> 

<tr> 

<td width=" 15%"><font size="3" face="arial">Tipo</fontX/td> 

<td> 

<select name="tipo"> 

<option > 

<option value="1">COMISSOES TRANSITORIAS DE ESTUDOS 
Coption value="2">CONSELHOS DE DEPARTAMENTO 
<option value="3">COMISSOES PERMANENTES DE UNIDADE 
ADMINISTRATIVA 

</select> 

</td> 

</tr> 

<tr> 

<td width="15%"><font size="3" face="arial">Fundamento</fontX/td> 
<td> 

< TEXT ARE A NAME=" fundamento" COLS=50 R0WS=3X/TEXTAREA> 
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</td> 

</tr> 

<tr> 

<td align="center" colspan="2"> 

<INPUT TYPE="SUBMIT" VALUE="Salvar"> 
</td> 

</tr> 

</table> 

</FORM> 

</body> 

</html> 
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8. Frames 

E um recurso que permite dividir uma pagina de Internet em outras, na mesma 
pagina. Nada mais e que uma pagina que “chama” outras na pagina inicial que um 
documento html que contem frames. 

Em um determinado arquivo como o index.html, e onde pode ser definido a 
estrutura das novas janelas para o seu HTML. 


8.1 - Estrutura 

Assim como o corpo do HTML, os FRAMES tern sua estrutura. Eles entram no 
lugar do corpo, substituindo o <BODY></BODY> por 
<FRAMESET></FRAMESET>. 

Exemplo: 

<HTML> 

<HEAD> 

<TITLE> Titulo do Documento </TITLE> 

</HEAD> 

<FRAMESET> 

Sintaxe dos Frames 
</FRAMESET> 

</HTML> 


8.2 - Sintaxe 

Primeiramente devemos fazer um documento HTML para ele ser especificado pela 
sintaxe de FRAMES, no caso chamado de Framel .htm. 

<HTML> 

<HEAD> 

<TITLE> Frame 1 </TITLE> 

</HEAD> 

<BODY> 
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<FONT SIZE=+1> <B> Frame nl </B> </FONT> 
</BODY> 

</HTML> 


8.3 - FRAMESET 

A primeira especificagao e o FRAMESET, que e acompanhado pelas definigoes 

ROWS e COLS. 

8.3.1 - ROWS 


Especifica o numero de FRAMES e a altura de cada um. 

Exemplo: 

<FRAMESET ROWS="20%,30%, 50%"> 

<FRAME SRC="Framel.html"> 

<FRAME SRC="Framel.html"> 

<FRAME SRC="Frame1.html"> 

</FRAMESET> 

Neste exemplo de cima, ele chama tres FRAMES, o 1° com 20% da tela, o 2° com 
30% da tela, o 3° com 50% da tela (ambos em altura). 



JBlni ciar| ] i^J | i^JCaixa de entr... | C:\Document... | [^apostilaHTML....| |£-]Titulo do Do... sf iy> 08:56 
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8.3.2 - COLS 

Especifica o numero de FRAMES e a largura de cada um. 

Exemplo: 

<FRAMESET COLS="20%,30%,50%"> 

<FRAME SRC="Frame1.html"> 

<FRAME SRC="Framel.html"> 

<FRAME SRC="Framel.html"> 

</FRAMESET> 

Neste exemplo de cima, ele chama tres FRAMES, o 1° com 20% da tela, o 2° com 
30% da tela, o 3° com 50% da tela (ambos em largura). 



8.4 - FRAME 

A segunda especificagao e o FRAME, que e acompanhado pelas definigoes SRC, 

NAME, SCROLLING, NORESIZE, TARGET. 

















43 


8.4.1 - SRC 


Especifica o documento de formato HTML chamado para o FRAME. 

Indispensavel, por que sem ele so o documento aparecera vazio, so com as 
divisoes. 

Exemplo: 

<FRAMESET COLS="20%,30%,50%"> 

<FRAME SRC="Frame1.html"> 

<FRAME SRC="Frame1.html"> 

<FRAME SRC="Frame1.html"> 

</FRAMESET> 

8.4.2 - NAME 

Especifica o nome do documento de formato HTML chamado para o FRAME. 

E extremamente necessario para o uso do TARGET, que sera visto a seguir. 
Exemplo: 

<FRAMESET COLS="20%,30%,50%"> 

<FRAME SRC="Framel.html" NAME="Principal"> 

<FRAME SRC="Frame1.html"> 

<FRAME SRC="Frame1.html"> 

</FRAMESET> 

8.4.3-SCROLLING 

Define se o Frame tera barra de rolagem, o default e Auto. 

Fornece as opgoes: Yes, No, Auto. 

Yes - Exibe a barra de rolagem independente do tamanho do documento. 

No - Nao exibe a barra de rolagem, mesmo que o documento seja maior 
que o tamanho especificado. 

Auto - So exibe a barra de rolagem se o documento for maior que a area 
especificada. 
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Exemplo: 


<FRAMESET COLS="20%,30%,50%" 

<FRAME SRC="Framel.html" 
<FRAME SRC="Framel.html" 
<FRAME SRC="Frame1.html" 
</FRAMESET> 


SCROLLING="no"> 
SCROLLING=" yes"> 
SCROLLING= "auto"> 



8.4.4-NORESIZE 

Impossibilita o usuario de mudar o tamanho da area especificada do FRAME. 
Por default o usuario pode mudar esta area. 

Exemplo: 

<FRAMESET COLS="20%,30%,50%"> 

<FRAME SRC="Framel.html" NORESIZE> 

<FRAME SRC="Framel.html" > 

<FRAME SRC="Framel.html" > 


</FRAMESET> 
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8.4.5 - TARGET 

Define qual a area (FRAME) que aparecera o documento especificado pelo link. 
Mais util na utilizagao de Menus e indices. 

Necessita do NAME. 

Exemplo: 

<FRAMESET COLS="20%,30%,50%"> 

<FRAME SRC="Framel.html" NAME="Principal"> 

<FRAME SRC="Frame1.html"> 

<FRAME SRC="Frame1.html"> 

</FRAMESET> 

O Link: 

<A HREF="http://www.unesp.br" TARGET=" Principal"> Unesp </A> 

Se voce quiser criar um link que chama uma nova tela do browser basta 
colocar TARGET="um nome que nao existe". 


8.5-BORDER 

Define qual a borda que o FRAME tera. 

Mais util na utilizagao de BACKGROUNDS iguais. 

Exemplo: 

<FRAMESET COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0> 

<FRAME SRC="Framel.html" FRAMEBORDER="NO" BORDER=0> 
<FRAME SRC="Framel.html" FRAMEBORDER="NO" BORDER=0> 
<FRAME SRC="Framel.html" FRAMEBORDER="NO" BORDER=0> 


</FRAMESET> 
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9. Tabelas de Cores 

Esta tabela de cores pode ser usar quando quiser definir as cores de uma fonte de 
um texto ou entao quando quiser definir o fundo de uma pagina. Deve-se usar o 
nome que esta em ingles. 


Branco 

White 

Preto 

Black 

Azul 

Blue 

Amarelo 

Yellow 

Verde 

Green 

Laranja 

Orange 

Vermelho 

Red 

Rosa 

Pink 

Cinza 

Gray 

Ouro 

Gold 

Verde azulado 

Teal 

Azul marinho 

Navy 

Praia 

Silver 


Tambem podera ser usado o nome em hexadecimal para definir a cor: 
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10. css 


10.1 Oquee CSS? 

CSS e a mesma coisa que Style Sheets e que Folhas de Estilo. Voce ja deve ter 
visto esses nomes em varios lugares. CSS e mais uma forma de aperfeigoar seus 
documentos, o CSS tem muitos tipos de definigao aqui veremos muitas delas. 


No que eles podem nos ajudar? 

• Economizar o seu tempo. 

• Diminuir o tamanho do codigo de sua pagina. 

• Sua pagina ira carregar mais rapidamente. 

• Mais facilidade de manter e fazer alteragoes na pagina. 

• Mais controle no layout da pagina. 


10.2 Como criar estilos 

Cada estilo que voce cria e definido como uma regra CSS. Cada regra deve 
utilizar a seguinte sintaxe: 

elemento {atributol: valor; atributo2: valor ...} 


Explicagao desta sintaxe: 

Elemento - descreve o elemento de design ao qual o estilo sera aplicado. A 
mesma tag HTML mas, sem os sinais de maior e menor. Essa parte da regra e as 
vezes chamada de seletor. 

Atributo - o aspecto especifico do elemento que voce quer usar como estilo. Deve 
ser urn nome de atributo CSS valido, como o atributo font-size. 

Valor - a configuragao aplicada ao atributo. Deve ser uma configuragao valida 
para o atributo em questao, como 20pt (20 pontos) para font-size. 

Atributo: valor - a parte declaragao da regra. Voce pode atribuir multiplas 
declaragoes se desejar separa-los com ponto-e-virgula (;). Nao coloque urn ponto- 
e-virgula depois da ultima declaragao. 
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Agora e hora de exemplos. Eis uma regra CSS que especifica que todos os titulos 
de nivel 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos: 

HI {font-size: 36pt} 

Aqui esta um exemplo de regra que diz que todos os titulos de nivel 2 (tags <H2>) 
devem ter tamanho de 24 pontos e cor azul; 

H2 {font-size: 24pt; color: blue} 

Voce pode inserir quebras de linha e espagos em branco dentro da regra 
como quiser. Assim, e possivel ver mais facilmente todas as declaragoes e 
certificar-se de que colocou todos os sinais de ponto-e-virgula e colchetes nos 
lugares corretos. Por exemplo, aqui esta uma regra que diz que os paragrafos 
aparecerao em fonte Times, 12 pontos, azul e recuados meia polegada a partir da 
margem esquerda da pagina: 

P {font-family: Times; 

font-size: 12pt; 

color: blue; 

margin-left: 0.5in} 


Note como e facil aplicar todas as declaragoes ao elemento paragrafo (P) e como 
cada declaragao, exceto a ultima, e seguida pelo caracter de ponto-e-virgula 
exigido. 


10.3 Tipos de Folhas de Estilo 

Voce pode definir regras de CSS em tres lugares. E, por definigao, pode utilizar 
uma combinagao dos tres metodos nos seus web sites. A maneira como as regras 
interagem entre si esta relacionada a parte "em cascata".Os tres lugares sao: 

1) em um documento separado fora de todos os documentos HTML; 

2) no cabegalho de um documento HTML e, 

3) dentro de uma tag de HTML. Cada um destes metodos tern um nome e 
afeta as paginas HTML em seu site de um modo diferente, como discutido aqui: 

Externo - Externo significa que voce coloca as regras de CSS em um arquivo 
separado, e entao sua pagina HTML pode fazer um link para esse arquivo. Essa 
abordagem Ihe permite definir regras em um ou mais arquivos que podem ser 
aplicadas em alguma pagina do seu web site. 
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Incorporado - Incorporado significa que voce especifica as regras de CSS no 
cabegalho do documento. As regras incorporadas afetam somente a pagina atual. 

Inline - Inline significa que voce especifica as regras de CSS dentro da tag de 
HTML. Essas regras afetam somente a tag atual. 


10.3.1 Estilos Externos 

Para definir urn conjunto de regras de estilo que voce pode facilmente 
aplicar em alguma pagina do seu site, e preciso colocar as regras em urn 
arquivo de texto. Voce pode criar este arquivo com urn editor de textos 
simples, como o Notepad do Windows, e dar ao nome desse arquivo a 
extensao .css. 

Sempre que quiser utilizar esses estilos em uma nova pagina, basta colocar 
uma tag <LINK> no cabegalho que referencie esse arquivo .css. Veja o 
exemplo: 

Arquivo OrgaoColegiado.css 

H4 { 

font-family: 'Arial'; 
font-size: 14pt; 
color: blue 


} 

Agora, para utilizar os estilos definidos neste arquivo .css voce precisa 
adicionar a tag a seguir ao cabegalho da pagina, onde nome_do_arquivo e 
uma referenda absoluta ou relativa ao arquivo .css. 

CLINK REL="STYLESHEET" 

HREF=" OrgaoColegiado. css" TYPE="text/css"> 


OBS: Voce deve inserir este texto entre as tags <HEAD>...</HEAD>, e 
colocar a localizagao correta do seu arquivo e seu nome. 


10.3.2 Estilos Incorporados 

Se quiser criar urn conjunto de estilos que se aplicam a uma unica pagina, 
voce pode configurar os estilos exatamente como fizemos no exemplo dos 
estilos externos - mas em vez de colocar as tags <STYLE>...</STYLE>, e 
as regras em urn arquivo separado, coloque estas tags na propria pagina 
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HTML. A estrutura basica de uma pagina da web que utiliza estilos 
incorporados e semelhante ao seguinte codigo: 


<HTML> 

<HEAD> 

<TITLE>Exemplo Estilos Incorporados</TITLE> 
<STYLE TYPE="text/css"><!-- 

P { 

background-color: #FFFFFF; 
font-familyComic Sans MS'; 
font-size: 14pt 

} 

--></STYLE> 

</HEAD> 

</BODY> 

</HTML> 


10.3.3 Estilos Inline 


Os estilos inline sao os que tern menos efeitos. Eles afetam somente a tag 
atual - nao outras tags na pagina e tampouco outros documentos. A sintaxe 
para definir um estilo inline e a seguinte: 


Exemplo: <A STYLE="color: green; text- 
decoration: none" HREF="http://www.unesp.br"> 


Note que em vez das tags <STYLE>...</STYLE>, voce apenas utiliza um 
atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as 
regras de CSS entre colchetes, voce as coloca entre aspas, separando-as 
com ponto-e-virgula como de costume. 


10.4 Tags Personalizadas 

Com as classes de estilo, e possivel definir diversas variagoes de uma unica tag. 
Por exemplo, voce poderia fazer um estilo de paragrafo "texto alinhado a direita", 
um estilo de paragrafo "texto centralizado" e assim por diante, criando multiples 
temas em torno da tag de paragrafo. (<P>) 
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Voce pode definir classes de estilo tanto em folhas de estilo externa como nas 
incorporadas. (Nao ha sentido em definir uma classe em urn estilo inline!) A 
sintaxe e praticamente identica a sintaxe normal para os estilos externo e 
incorporado, com adigao de urn ponto e o nome da classe depois do elemento na 
qual sera utilizado o atributo. 

<STYLE TYPE="text/css"><!-- 

elemento.nomedaClasse {atributo:valor; ... } 

—></STYLE> 

Exemplo: 

Adicionar esta TAG dentro da TAG <Head> da pagina index.html: 

<STYLE TYPE="text/css"><!-- 
A.meuslinks { 

color: blue; 

text-decoration: none 

} 

—></STYLE> 

Depois apenas adiciono o atributo CLASS-'meuslinks" aos links em que eu 
desejar que fiquem azuis e nao-sublinhados. Veja como deve ficar: 


<A CLASS="meuslinks" HREF="EstiloTexto.html"> 
Estilo de Texto 

</A> 



:*lnid«r . Jj© “ jc...| 3JC..-I B]a...| lj]C,.,| | %M..| U|i... | |^|C... US & 10:42 
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10.4.1 Utilizando a TAG <DIV> 

As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande 
bloco de texto - uma divisao - abrangendo diversos paragrafos e outros 
elementos. Isso as torna uma boa opgao para definir estilos que afetam 
grandes segoes de um texto em uma pagina. Veja: 

<STYLE TYPE="text/css"><!-- 
DIV.sidebar { 

font=family: "Arial"; 
font-size: 12pt; 
text-align: right; 
background-color: #C0C0C0; 
margin-left: lin; 
margin-right: lin 

} 

—></STYLE> 


Ao colocar na tag <DIV> o atributo CLASS, voce estara fazendo com que 
todos os elementos que estejam englobados nesta tag sigam estes 
pad roes. 

<BODY> 

Cursos: 

<OL> 

<LI>Selecione 

<DIV CLASS="sidebar">Matematica</DIV> 

<br> 

<DIV CLASS="sidebar">Medicina</DIV> 

</OLX/BODY> 


10.4.2 Utilizando a TAG <SPAN> 

As tags <SPAN>...</SPAN> sao como tags <DIV>...</DIV> no sentido de 
que voce pode utiliza-las para definir estilos que formatam um bloco de 
texto. Ao contrario de <DIV>, contudo, que e utilizada para divisoes de texto 
grandes, a tag <SPAN> e especializada para blocos de textos menores - 
que podem ser tao pequenos como um unico caracter. Veja um bom 
exemplo do que se pode fazer utilizando esta tag. 

<STYLE TYPE="text/css"><!-- 
SPAN.hot { 

color:green; 
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text-decoration: underline} 
—></STYLE> 


Utilizada no codigo HTML... 

<BODY> 

Para sair de um programa: 

<0L> 

<LI>Selecione <SPAN CLASS="hot">A</SPAN>rquivo 

<SPAN CLASS="hot">S</SPAN>air 
</OLX/BODY> 
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10.5 Atalhos e atributos de CSS 


10.5.1 Atalhos de CSS 

Alguns atributos de CSS Ihe permitem fazer diversas configuragoes em uma 
declaragao. Por exemplo, suponha que voce queira definir diversos 
aspectos da fonte utilizada para tags HI, como segue: 

HI { 

font-style: italic; 
font-weight: bold; 
font-size: 18pt; 
font-family: 'Times Roman'} 


Como alternativa a especificar todas essas formatagoes de fonte 
individualmente, voce pode utilizar o atributo font: para defini-las todas de 
uma so vez, assim: 

hi { 

font: italic bold 18pt 'Times Roman'} 

Note como diversos valores - italico, negrito, 18pt e Times Roman - sao 
separados apenas por urn espago em branco. Essas regras abreviadas 
certamente poupam espago e tempo de digitagao. 


10.5.2 Atributos de CSS 


Atributo de CSS 

background 

background-attachment 

background-image 

background-color 

background-position 

background-repeat 


O que ele formata 

Cor de fundo, imagem, 
transparency. 

Rolagem do fundo / Marca 
d'agua. 

Imagem de fundo. 

Cor de fundo ou 
transparency. 
Posicionamento da 
imagem de fundo. 
Configuragao lado-a-lado 
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border 

border-bottom 

border-bottom-color 

border-bottom-style 

border-bottom-width 

border-color 

border-left 

border-left-color 

border-left-style 

border-left-width 

border-right 

border-right-color 

border-right-style 

border-right-width 

border-style 

border-top 

border-top-color 

border-top-style 

border-top-width 

border-width 

clear 

clip 

color 

cursor 

display 

filter 

float 


da imagem de fundo. 
Largura, estilo e cor de 
todas as 4 bordas. 
Largura, estilo e cor da 
borda inferior. 

Cor da citada borda. 

Estilo da citada borda. 
Largura da citada borda. 
Cor das 4 bordas. 

Largura, estilo e cor da 
borda esquerda. 

Cor da borda citada. 

Estilo da borda citada. 
Largura da borda citada. 
Largura, estilo e cor da 
borda direita. 

Cor da borda citada. 

Estilo da borda citada. 
Largura da borda citada. 
Estilo de todas as 4 boras. 
Largura, estilo e cor da 
borda superior. 

Cor da borda citada. 

Estilo da borda citada. 
Largura da borda citada. 
Largura de todas as 4 
bordas. 

Elementos flutuantes a 
esquerda ou a direita de 
um elemento. 

Parte visivel de um 
elemento. 

Cor de primeiro piano. 
Tipo de ponteiro do 
mouse. 

Se o elemento e exibido e 
o espago e reservado para 
ele. 

Tipo de filtro aplicado ao 
elemento. 

Se o elemento flutua. 
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font 

@font-face 

font-family 

font-size 

font-style 

Fonte-variant 

font-weight 

height 

@import 

left 

letter-spacing 

line-height 

list-style 

list-style-image 

list-style-position 

list-style-type 

margin 

margin-left 

margin-right 

margin-bottom 

margin-top 

overflow 

padding 


Estilo, variante, peso, 
tamanho e altura da linha 
do tipo de fonte. 
Incorporagao da fonte ao 
arquivo HTML. 

Tipo de fonte. 

Tamanho da fonte. 

Fonte italico. 

Fonte bold. 

Peso da fonte de claro a 
negrito. 

Altura exibida ao 
elemento. 

Folha de estilo a importar. 
Posigao do elemento em 
relagao a margem 
esquerda da pagina. 
Distancia entre as letras. 
Distancia entre linhas de 
base. 

Tipo, imagem e posigao do 
estilo da lista. 

Marcador de item de lista. 
Posigao do marcador de 
item da lista. 

Marcador de item de lista 
alternative. 

Tamanho de todas as 4 
margens. 

Tamanho da margem 
esquerda. 

Tamanho da margem 
direita. 

Tamanho da margem 
inferior. 

Tamanho da margem 
superior. 

Exibigao de imagens que 
sao maiores do que suas 
molduras. 

Espago em torno de urn 
elemento em todos os 
lados. 
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padding-bottom 

padding-left 

padding-right 

padding-top 

page-break-after 

page-break-before 

position 

text-align 

text-decoration 

text-indent 

text-transform 

top 

vertical-align 

visibility 

width 

z-index 


Espago a partir da 
margem inferior de um 
elemento. 

Espago a esquerda do 
elemento. 

Espago a direita do 
elemento. 

Espago a partir da 
margem superior do 
elemento. 

Inserir quebra de pagina 
depois de um elemento. 
Inserir quebra de pagina 
antes de um elemento. 
Como o elemento e 
posicionado na pagina. 
Alinhamento do texto. 
Sublinhado, sobrelinhado 
ou riscado. 

Recuo da primeira linha do 
paragrafo. 

Transformagao para todas 
maiusculas, minusculas ou 
inicial maiuscula. 

Posigao do elemento em 
relagao a parte superior 
da pagina. 

Alinhamento vertical do 
elemento. 

Se elemento e visivel ou 
invisivel. 

Largura do elemento. 
Posigao do elemento na 
pilha. 
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Exercicios 


Exercicios: 

1) Crie uma nova pagina chamada Exercicio.html e deixe-a com o seguinte 
layout: 


"5 Curso de HTML - Microsoft Internet Explorer 



;j9lniciar| | | 23 Q ”1J £jcJajcJ J|Jm] JQeJ QaJj^aJ Jjcj 4 JO> 09:40 


a) O cabegalho “Sistema de Orgaos Colegiados” deve ter tamanho 3 e 
ficar centralizado. 

b) Apos o cabegalho incluir uma linha horizontal tamanho 2 e cor cinza. 

c) O texto “Cursos de Graduagao” deve ser fonte Arial, tamanho 3 e cor 
Azul. 

d) O texto “Cursos de Pos-Graduagao” deve ser Negrito, fonte Arial, 
tamanho 3 e cor Verde. 

e) O texto “Mestrado” deve ser Italico, fonte Arial, tamanho 3 e cor 
Laranja. 

f) O texto “Doutorado” deve ser Sublinhado, fonte Arial, tamanho 3 e 
cor Vermelha. 

g) O texto “Esta e a primeira aula de HTML” deve ser urn texto pre- 
formato como mostrado na figura, fonte Arial, tamanho 5 e cor 
Magenta. 
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2) Crie uma nova pagina chamada Exerciciol .html e deixe-a com o seguinte 
layout: 



a) O texto devera ser em cor azul com tamanho 3. 

b) A Linha horizontal deve ser cinza e tamanho 2. 

c) Para cada figura colocar urn texto para aparecer com for posicionado 
o mouse sobre a imagem. O texto a seguir colocar para cada figura 
seguindo a ordem (Buscar, Mostrar todos, Registro Anterior, Proximo 
Registro, Salvar, Limpar, Excluir). 

d) Para os links fazer para o site da Unesp e da Receita Federal. 


3) Em outra pagina criar uma lista nao ordenada com o tipo Square com os 
seguintes itens: 

Cursos de Graduagao: 

Agronomia 

Biologia 
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Ciencia da Computagao 

Direito 

Medicina 

Nutrigao 

Odontologia 

Pedagogia 

Zootecnia 

Para cada linha fazer na fonte tamanho 2, alterar as cores das linhas em 
verde e marrom. 


3 Exercicio 2 - Microsoft Internet Explorer 


Arquivo Editar Exibir Favoritos Ferramentas Ajuda 

Ka 

4 ii a J 4' J 31 • J 

Enderefo C:\Documents and Settings\Vanessa\Meus documentos\Curso\OrgaoColegiado\Exercicio2.html 

d Links ” 

Cursos de Gradua;ao 

d 


Agronomia 

Biologia 

Ciencia da Computagao 

Direito 

Medicina 

Nutrigao 

Odontologia 

Pedagogia 

Zootecnia 


d 


Condufdo ^-J Meu computador 

;iainiclar| | g eg) ^3 ® ”1 I ljK.| <j|C.| QjC.] 0w| B]a.| B]l.| SjpE.| y T.| 15:47 
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4) Criar uma pagina com o nome Exercio3.html com o seguinte layout: 


'^Exercicio 3 - Microsoft Internet Explorer 






Arquivo Editar Exibir Favoritos Ferramentas 

Ajuda 




□ 

3[2l<2}|€l(S90li 

• ia- 

a 




Enderefo C:\Documents and Settings\Vanessa\Meus documentos\Curso\OrgaoColegiado\Exercio3.html 


(>Ir Links ” 

Notas dos alunos 





-4 







Alunos 

JL 


Notas 



r~ 


Prova 

Trabalho 



Ana Paula 

LIE 

10 


■ 


[Beatriz 


7 

5 



Joaquim 


9 

■i 

■ 


Paulo 


4,5 

6 



Tadeu 

smm 

3 

■ ■ 2 

■ 



d 

fe] Condufdo 

^1, Meu computador 

ig01niciar| * © "| | t3C...| QjC...| JJi... | 

sf 16:26 


5) Construir a tela de cadastro de Orgao Colegiado como demonstrado na 
figura a seguir. Salvaresta pagina como ColegiadoOrgaoManutencao.html: 
































& x 


«- 




Colegiado UNESP ::: 

Manutenfao do Orgao Colegiado 


Umdade 

FACULDADE DE ENGENHARIA DE ILHA SOLTEIRA 

Tipo Colegiado 

C ON GREGAQAO 


Orgao Colegiado 


Nome |CONGREGAQAO 

DA FACULDADE DE ILHA SOLTEIRA 

Sigla |CFIS 

Status |ATIVADO 

Data Ativafao |l 5/10/2000 

Data Desativa^ao 

Orgao de Origem | 

Buscar | 

Orgao Superior | 

Buscar 


Documentaf ao 


Orgao criado com o objetivo de aprovar norms da unidade. 

zi 

Salvar | Excluir | 


Retornar | 


6) Criar uma pagina chamada Exercicio5.html e crie frames com o seguinte 
layout: 
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Executar os seguintes passos: 

a) Criar 3 paginas com os seguintes nomes: menu.html, rodape.html e 
principal.html 

b) Na pagina onde sera montado os frame (Exercicio5.html) monte o frame 
a seguir: 

- menu: frame com tamanho de 90% que devera chamar a pagina 
menu.html 

- rodape: frame com tamanho de 10% que devera chamar a pagina 
rodape.html 

- principal: frame com tamanho de 80% que devera chamar a pagina 
principal.html 

c) No menu coloque 4 links para os exercicios que fizemos ate agora. Olhe 
o exemplo acima. 

d) No rodape coloque urn link que chame a tela principal. 

e) Todos os links deverao abrir na tela principal 

f) Na tela principal coloque o texto “Curso de HTML” 
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7) Criar uma Folha de Estilo com nome de Exercicio.css e realizar as 
seguintes tarefas: 

a) Criar estilo para TAG de link para que nao tenha linha sublinhada e 
seja da cor azul 

b) Criar estilo para a TAG H3 com as seguintes propriedades: cor azul, 
fonte Arial, tamanho 12pt. 

c) Criar estilo para a TAG HI com as seguintes propriedades: cor azul, 
fonte Arial, tamanho 16pt. 

d) Criar estilo com nome de nomeCampo com as seguintes 
propriedades: cor preta, fonte Arial, tamanho 12pt. 

e) Fazer a chamada desta folha de estilo nas paginas menu.html, 
rodape.html, principal.html, Exercicio1.html, Exercicio2.html, 
Exercicio3.html 

f) Na pagina principal.html colocar a TAG HI para o Titulo da pagina. 

g) Nas paginas Exercicio1.html, Exercicio2.html, Exercicio3.html colocar 
a TAG H3 para os Titulos das paginas. 

8) Com base no exercicio 5 (formulario de Orgaos Colegiados), utilizar o arquivo 
CSS padrao da Unesp (folha.css), realizando as seguintes tarefas:[ 




unesp 


universidade estadual paulista 

T ‘ T "JULIO DE MESQUITA FILHO” 


Iddaiaaafeigacll 

Colegiado UNESP ::: 

► Nanutencao do Orgao Colegiado 



Unidade FACULDADE DE ENGENHARIA DE ILHA SOLTEIRA 

Tipo Colegiado CONGREGAQAO 


Orgao Colegiado 


Nome 

Sigla 

Data Ativagao 
Orgao de Origem 
Orgao Superior 

Documentagao 


|CONGREGACAO DA FACULDADE DE ILHA SOLTEIRA 
|CFIS 

|l5/10/2000 


Status | ATIVADO 

Data 

Desativagao 1 

Buscar | 

Buscar | 


Orgao criado com o objetivo de aprovar normas da unidade. 


- 


Salvar 


Excluir 


























a) Inclua dentro da tag de cabegalho 

<link href="folha.css" rel="stylesheet" type="text/css"> 


a) Dentro da tag BODY adicone: 
class="FundoPaginalnterna“ 

b) Dentro da tag TD do “Colegiado da Unesp” adicione: 
class="NomeArea" 

c) Dentro da tag TD do “Manutengao do Orgao Colegiado” adicione: 
class="TituloDestaque2“ 

d) Dentro da tag TD dos titulos “Unidade”, “Tipo Colegiado”, “Orgao 
Colegiado” adicione: 

class="tabela-titulo“ 

e) Dentro da tag TD dos nomes dos campos de formulario adicione: 
class-'tabela-linha" 

f) Para todos os campos de formulario adicione dentro de suas tags: 
class="itens-form“ 

g) Para fazer o rodape da pagina adicionar o codigo abaixo, antes de 
fechar a Tag BODY: 

<table width="768" border="0" cellpadding="0" cellspacing="0 
id="Rodape"> 

<tr> 

<td height="60" align="left" class="RodapeFundo"xtable 
width="100%" height="60" border="0" cellpadding="0" 
cellspacing="0" id="MenuRodape"> 

<tr> 

<td width="300" class="RodapeDestaque"> Secretaria 

Geral 

<tdxdiv align="center"Xa href="../" target=" blank 
class="RodapeTexto">Home</a></div></td> 

<td width="2" class="RodapeDivisor"Xdiv 
align="center"></div></td> 

<tdxdiv align="center"Xa href="../" 
class="RodapeTexto">Contato</a></div></td> 

<td width="2" class="RodapeDivisor"Xdiv 
align="center"></div></td> 
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<td><img src="imagens/spacer.gif" width="265" 
height="30"></td> 

<tdxdiv align="center"Xa href target=" top" 

class="RodapeTexto">Sair do Sistema</aX/divX/td> 

</tr> 

</table></td> 

</tr> 

</table> 

<table width="768" border="0" cellspacing="0" cellpadding="0"> 
<tr> 

<tdxtable width="567" border="0" align="center" 
cellpadding="0" cellspacing="0" id="desenv"> 

<tr> 

<td height="25"Xdiv align="center"Xspan 
class="desenvTXT">UNESP - 

Universidade Estadual Paulista 
&quot;J&uacute;lio de Mesquita 

Filho&quot; </span></divX/td> 

</tr> 

<tr> 

<td height="25"Xdiv 
align="center">Reitoria</div></td> 

</tr> 

</table></td> 

</tr> 

</table> 

<table width="768" border="0" cellpadding="0" cellspacing="0"> 
<tr class="desenvPor"> 

<td height="25" class="desenvPor"Xdiv 
align="center">Tecnologia e Desenvolvimento 

: <a href="http://www.unesp.br/ai" target=" blank"Xbr> 
Assessoria de Inform&aacute;tica</a> - <b>GRUPO DE 
SISTEMAS</b> 

<br> 

<br> 

<img src="http://shelob.unesp.br:2000/images/gscc.gif" 

/> 

<br> 

</div></td> 

</tr> 

</table> 



